<template>
    <el-container>
        <el-header>
            <span class="title" style="align-content: center;">汪汪羊电商管理员中心</span>
        </el-header>
        <el-container>
            <el-aside>
                <p class="text-large font-600 mr-3" style="text-align: center;height: 100px">
                    {{ name }}
                    <el-button type="danger" text>注销</el-button>
                </p>
                <hr>
                <el-menu router style=" background: lightyellow;">
                    <el-menu-item index="/manager/Mmessage">
                        <el-icon>
                            <user/>
                        </el-icon>
                        <span>用户管理</span>
                    </el-menu-item>
                    <hr>
                    <el-menu-item index="/manager/Pmessage">
                        <el-icon>
                            <present/>
                        </el-icon>
                        <span>商品管理</span>
                    </el-menu-item>
                    <hr>
                </el-menu>
            </el-aside>
            <el-main>
                <router-view></router-view>
            </el-main>
        </el-container>

    </el-container>

</template>

<script setup>
import {onMounted, ref,reactive,toRaw} from 'vue'
import {useRoute} from "vue-router";
import router from '../../router/index.js'
let name = ref('')

const token = localStorage.getItem('token')
const payload = token.split('.')[1]
const data = JSON.parse(decodeURIComponent(escape(window.atob(payload.replace(/-/g, "+").replace(/_/g, "/")))))
name = data.sub

const man = async() =>{
    router.push({
        path:'/manager/MSelf'
    })
}

</script>

<style scoped>

.icon{
    color: orangered;
    margin-top: 50px;
}

.el-header,
.el-footer {
    background: rgba(33, 33, 33, .8);
    color: #f9f9f9;
    text-align: center;
    line-height: 60px;
}

.el-aside {
    background-color: #d3dce6;
    color: var(--el-text-color-primary);
    text-align: center;
    line-height: 100px;
    height: 630px;
    width: 170px;
}

.el-main {
    background-color: #e9eef3;
    color: var(--el-text-color-primary);

}

body > .el-container {
    margin-bottom: 40px;
}

.el-container:nth-child(5) .el-aside,
.el-container:nth-child(6) .el-aside {
    line-height: 260px;
}

.el-container:nth-child(7) .el-aside {
    line-height: 320px;
}
</style>